<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全球新型冠状病毒实时数据统计应用程序</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container theme-showcase" role="main">

    <div class="jumbotron">
        <h1 align="center">全球新型冠状病毒实时数据</h1>
    </div>

    <div class="jumbotron">

        <p th:text="'当前日期：'+${#temporals.format(localDate,'yyyy-MM-dd')}"></p>
        <p th:text="'全球感染人数：'+${totalReportedCases}"></p>
        <p th:text="'全球新增感染人数：'+${totalNewCases}"></p>

    </div>

    <div class="search" style="display: inline">

        <input type="text" class="form-control" name="search" placeholder="请输入国家或地区">
        <div align="center">
            <button type="submit" class="btn btn-default">搜索</button>
        </div>

    </div>

    <div class="page-header">
    </div>
    <div class="row">
        <table class="table">
            <tr bgcolor=#e9ecef>
                <th>州/省</th>
                <th>国家</th>
                <th>病例总数</th>
                <th>新增病例</th>
            </tr>
            <tr th:each="regionStat:${regionStats}">
                <td th:text="${regionStat.state}"></td>
                <td th:text="${regionStat.country}"></td>
                <td th:text="${regionStat.latestTotalCases}"></td>
                <td th:text="${regionStat.diffFromPrevDay}"></td>
            </tr>
        </table>
    </div>

</div>

</body>
</html>